[Tips]LIFFアプリでYouTube再生後に公式アカウントへメッセージ送信する #LINE_API

チャットボット特集

#AWS

#LIFF

#LINE Bot

#LINE

にゃー

2019.11.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは、中村です。
LIFF SDKにはメッセージを送信する機能があります。これはユーザーの代わりにLIFFアプリを開いているトーク画面にメッセージを送信することができます。

今回は、YouTubeのIFrame Player APIを使ってLIFFアプリでYouTube動画を再生した後にメッセージを送信してくれる公式アカウントのサンプルを作成します。

やってみた

今回利用する動画、メッセージは常に同じものになります。また開くたびにメッセージが送信されますので例えばクーポンを送信したりする場合は、LINE IDでの管理などが必要になります。

インフラ

LIFFアプリで表示するために、HTMLとJavaScriptが実行できる環境を構築します。定番ですがCloudfrontとS3にします。

ソースコード

cm-nakamura-yuki/sample-liff-youtube にあります。

LIFFでYouTube再生/メッセージ送信

YouTubeでは、IFrame Player APIというAPIが提供されています。これは、YouTube動画プレイヤーを埋め込みしJavaScriptによる制御ができるものです。今回は、動画の表示・自動再生・終了時の検知に利用します。

APIのJavaScriptが読み込まれるとonYouTubeIframeAPIReady()が実行されます。ここでは、videoIdやサイズなどを元にプレイヤーの初期化します。初期化が完了し再生準備が整った時などステータスが変更された時に実行する関数を指定できます。

liff.sendMessagesは外部ブラウザでは利用できないため、liff.isInClientで内部ブラウザかどうかを判定します。またトーク画面が開かれている状態出ないとメッセージ送信できないためliff.sendMessagesでエラーになった場合はアラートをあげるようにしています。

    liff.init(
        {
            liffId: 'xxxxxxxxxxxxxxx'
        }
    ).then(() => {}
    ).catch((err) => {
        alert(err);
    });

    let player;
    let tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';

    let firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            videoId: 'VWRG_CU4bqc',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            if (liff.isInClient()) {
                liff.sendMessages([
                    {
                        type: 'text',
                        text: 'ご視聴いただきありがとうございます。店舗でこちらのQRコードを店員にお見せください。'
                    },
                    {
                        type: 'image',
                        originalContentUrl: 'https://d2m1p9h7y3k5h.cloudfront.net/img/careers.png',
                        previewImageUrl: 'https://d2m1p9h7y3k5h.cloudfront.net/img/careers.png'
                    }
                ]).then(() => {
                    liff.closeWindow();
                }).catch((err) => {
                    alert('トーク画面からLIFFアプリ開いてください。 ' + err);
                });
            } else {
                alert('ご視聴いただきありがとうございます。クーポンを受け取るにはLINE公式アカウントから開く必要があります。');
            }
        }
    }